<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>my-crud/src/Crud.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_components_my-affix.html">$ui/components/my-affix</a></li><li><a href="module-$ui_components_my-anchor.html">$ui/components/my-anchor</a></li><li><a href="module-$ui_components_my-autocomplete.html">$ui/components/my-autocomplete</a></li><li><a href="module-$ui_components_my-avatar.html">$ui/components/my-avatar</a></li><li><a href="module-$ui_components_my-avatars.html">$ui/components/my-avatars</a></li><li><a href="module-$ui_components_my-back-top.html">$ui/components/my-back-top</a></li><li><a href="module-$ui_components_my-capture.html">$ui/components/my-capture</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-capture.html#~_renderImg">_renderImg</a></li></ul></li><li><a href="module-$ui_components_my-card-list.html">$ui/components/my-card-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-card-list.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-cascader.html">$ui/components/my-cascader</a></li><li><a href="module-$ui_components_my-checkbox.html">$ui/components/my-checkbox</a></li><li><a href="module-$ui_components_my-clipboard.html">$ui/components/my-clipboard</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-clipboard.html#~copy">copy</a></li></ul></li><li><a href="module-$ui_components_my-color-picker.html">$ui/components/my-color-picker</a></li><li><a href="module-$ui_components_my-contextmenu.html">$ui/components/my-contextmenu</a></li><li><a href="module-$ui_components_my-corner-mark.html">$ui/components/my-corner-mark</a></li><li><a href="module-$ui_components_my-crud.html">$ui/components/my-crud</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-crud.html#~openAddDialog">openAddDialog</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~reload">reload</a></li></ul></li><li><a href="module-$ui_components_my-date.html">$ui/components/my-date</a></li><li><a href="module-$ui_components_my-date-picker.html">$ui/components/my-date-picker</a></li><li><a href="module-$ui_components_my-description.html">$ui/components/my-description</a></li><li><a href="module-$ui_components_my-detail.html">$ui/components/my-detail</a></li><li><a href="module-$ui_components_my-detail-item.html">$ui/components/my-detail-item</a></li><li><a href="module-$ui_components_my-dialog.html">$ui/components/my-dialog</a></li><li><a href="module-$ui_components_my-drag.html">$ui/components/my-drag</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-drag.html#~getRelativeEl">getRelativeEl</a></li></ul></li><li><a href="module-$ui_components_my-drop.html">$ui/components/my-drop</a></li><li><a href="module-$ui_components_my-edit-tags.html">$ui/components/my-edit-tags</a></li><li><a href="module-$ui_components_my-editor.html">$ui/components/my-editor</a></li><li><a href="module-$ui_components_my-empty.html">$ui/components/my-empty</a></li><li><a href="module-$ui_components_my-filter.html">$ui/components/my-filter</a></li><li><a href="module-$ui_components_my-fixed.html">$ui/components/my-fixed</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-fixed.html#~resize">resize</a></li></ul></li><li><a href="module-$ui_components_my-flex.html">$ui/components/my-flex</a></li><li><a href="module-$ui_components_my-flex-item.html">$ui/components/my-flex-item</a></li><li><a href="module-$ui_components_my-flip.html">$ui/components/my-flip</a></li><li><a href="module-$ui_components_my-float.html">$ui/components/my-float</a></li><li><a href="module-$ui_components_my-float-item.html">$ui/components/my-float-item</a></li><li><a href="module-$ui_components_my-form.html">$ui/components/my-form</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-form.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-form.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-form_src_Base.html">$ui/components/my-form/src/Base</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html">$ui/components/my-form/src/common/TagInput</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html">$ui/components/my-form/src/common/TagSelect</a></li><li><a href="module-$ui_components_my-form_src_common_TreeSelect.html">$ui/components/my-form/src/common/TreeSelect</a></li><li><a href="module-$ui_components_my-header.html">$ui/components/my-header</a></li><li><a href="module-$ui_components_my-highlight.html">$ui/components/my-highlight</a></li><li><a href="module-$ui_components_my-icon.html">$ui/components/my-icon</a></li><li><a href="module-$ui_components_my-im-wall.html">$ui/components/my-im-wall</a></li><li><a href="module-$ui_components_my-input.html">$ui/components/my-input</a></li><li><a href="module-$ui_components_my-input-number.html">$ui/components/my-input-number</a></li><li><a href="module-$ui_components_my-layout.html">$ui/components/my-layout</a></li><li><a href="module-$ui_components_my-lazy.html">$ui/components/my-lazy</a></li><li><a href="module-$ui_components_my-list.html">$ui/components/my-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-list.html#~load">load</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~scrollTop">scrollTop</a></li></ul></li><li><a href="module-$ui_components_my-location-picker.html">$ui/components/my-location-picker</a></li><li><a href="module-$ui_components_my-login.html">$ui/components/my-login</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-login.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-marquee.html">$ui/components/my-marquee</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-marquee.html#~pause">pause</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-master-app.html">$ui/components/my-master-app</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-master-app.html#~initState">initState</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~setState">setState</a></li></ul></li><li><a href="module-$ui_components_my-menu.html">$ui/components/my-menu</a></li><li><a href="module-$ui_components_my-micro-app.html">$ui/components/my-micro-app</a></li><li><a href="module-$ui_components_my-navbar.html">$ui/components/my-navbar</a></li><li><a href="module-$ui_components_my-navbar-FullScreenAction.html">$ui/components/my-navbar-FullScreenAction</a></li><li><a href="module-$ui_components_my-navbar-IconAction.html">$ui/components/my-navbar-IconAction</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html">$ui/components/my-navbar-UserAction</a></li><li><a href="module-$ui_components_my-number.html">$ui/components/my-number</a></li><li><a href="module-$ui_components_my-panel.html">$ui/components/my-panel</a></li><li><a href="module-$ui_components_my-paragraph.html">$ui/components/my-paragraph</a></li><li><a href="module-$ui_components_my-pro.html">$ui/components/my-pro</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-pro.html#~addTab">addTab</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~closeTabs">closeTabs</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~setTab">setTab</a></li></ul></li><li><a href="module-$ui_components_my-promise.html">$ui/components/my-promise</a></li><li><a href="module-$ui_components_my-radial-menu.html">$ui/components/my-radial-menu</a></li><li><a href="module-$ui_components_my-radio.html">$ui/components/my-radio</a></li><li><a href="module-$ui_components_my-range.html">$ui/components/my-range</a></li><li><a href="module-$ui_components_my-rate.html">$ui/components/my-rate</a></li><li><a href="module-$ui_components_my-resize.html">$ui/components/my-resize</a></li><li><a href="module-$ui_components_my-result.html">$ui/components/my-result</a></li><li><a href="module-$ui_components_my-revolve.html">$ui/components/my-revolve</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-revolve.html#~next">next</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~prev">prev</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-search-box.html">$ui/components/my-search-box</a></li><li><a href="module-$ui_components_my-select.html">$ui/components/my-select</a></li><li><a href="module-$ui_components_my-sidebar.html">$ui/components/my-sidebar</a></li><li><a href="module-$ui_components_my-skeleton.html">$ui/components/my-skeleton</a></li><li><a href="module-$ui_components_my-slider.html">$ui/components/my-slider</a></li><li><a href="module-$ui_components_my-sortable.html">$ui/components/my-sortable</a></li><li><a href="module-$ui_components_my-spin.html">$ui/components/my-spin</a></li><li><a href="module-$ui_components_my-stat-card.html">$ui/components/my-stat-card</a></li><li><a href="module-$ui_components_my-switch.html">$ui/components/my-switch</a></li><li><a href="module-$ui_components_my-table.html">$ui/components/my-table</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-table.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-tabs.html">$ui/components/my-tabs</a></li><li><a href="module-$ui_components_my-tag-canvas.html">$ui/components/my-tag-canvas</a></li><li><a href="module-$ui_components_my-tag-input.html">$ui/components/my-tag-input</a></li><li><a href="module-$ui_components_my-tag-select.html">$ui/components/my-tag-select</a></li><li><a href="module-$ui_components_my-text.html">$ui/components/my-text</a></li><li><a href="module-$ui_components_my-timer.html">$ui/components/my-timer</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-timer.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-title.html">$ui/components/my-title</a></li><li><a href="module-$ui_components_my-tree-select.html">$ui/components/my-tree-select</a></li><li><a href="module-$ui_components_my-typography.html">$ui/components/my-typography</a></li><li><a href="module-$ui_components_my-water-fall.html">$ui/components/my-water-fall</a></li><li><a href="module-$ui_components_my-watermark.html">$ui/components/my-watermark</a></li><li><a href="module-$ui_components_my-wave.html">$ui/components/my-wave</a></li><li><a href="module-$ui_components_my-wrapper.html">$ui/components/my-wrapper</a></li><li><a href="module-widgets_my-print.html">widgets/my-print</a></li></ul><h3>Events</h3><ul><li><a href="module-$ui_components_my-stat-card.html#~event:action">action</a></li><li></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:add">add</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:back">back</a></li><li><a href="module-$ui_components_my-dialog.html#~event:cancel">cancel</a></li><li><a href="module-$ui_components_my-typography.html#~event:change">change</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-radial-menu.html#~event:click">click</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-avatars.html#~event:click-add">click-add</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-item">click-item</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-more">click-more</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:close">close</a></li><li></li><li><a href="module-$ui_components_my-pro.html#~event:collapse">collapse</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html#~event:collapsed">collapsed</a></li><li><a href="module-$ui_components_my-table.html#~event:column-change">column-change</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html#~event:command">command</a></li><li></li><li></li><li><a href="global.html#event:complete">complete</a></li><li></li><li><a href="module-$ui_components_my-typography.html#event:copy">copy</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drag.html#~event:drag">drag</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-start">drag-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-stop">drag-stop</a></li><li><a href="module-$ui_components_my-drop.html#~event:drop">drop</a></li><li><a href="module-$ui_components_my-typography.html#event:edited">edited</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:editing">editing</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:enter">enter</a></li><li><a href="module-$ui_components_my-table.html#~event:error">error</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:expand">expand</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:finish">finish</a></li><li><a href="module-$ui_components_my-dialog.html#~event:hide">hide</a></li><li><a href="module-$ui_components_my-lazy.html#~event:init">init</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:input-change">input-change</a></li><li><a href="module-$ui_components_my-drop.html#~event:leave">leave</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:link-click">link-click</a></li><li><a href="module-$ui_components_my-dialog.html#~event:load">load</a></li><li><a href="module-$ui_components_my-revolve.html#~event:loaded">loaded</a></li><li><a href="module-$ui_components_my-dialog.html#~event:maximize">maximize</a></li><li><a href="module-$ui_components_my-im-wall.html#~event:on-added">on-added</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-capture">on-capture</a></li><li><a href="global.html#event:on-change">on-change</a></li><li><a href="module-$ui_components_my-tag-canvas.html#~event:on-click">on-click</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-output">on-output</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:open">open</a></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:over">over</a></li><li><a href="global.html#~event:page-change">page-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:pki">pki</a></li><li><a href="module-$ui_components_my-revolve.html#~event:progress">progress</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:remove">remove</a></li><li><a href="module-$ui_components_my-timer.html#~event:reset">reset</a></li><li></li><li><a href="module-$ui_components_my-resize.html#~event:resize">resize</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-start">resize-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-stop">resize-stop</a></li><li><a href="module-$ui_components_my-search-box.html#~event:search">search</a></li><li><a href="module-$ui_components_my-sidebar.html#~event:select">select</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:show">show</a></li><li><a href="global.html#~event:size-change">size-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:start">start</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:stop">stop</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:submit">submit</a></li><li></li><li></li><li><a href="module-$ui_components_my-table.html#~event:success">success</a></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-panel.html#~event:tab-change">tab-change</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-remove">tab-remove</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-select">tab-select</a></li><li><a href="module-$ui_components_my-timer.html#~event:tick">tick</a></li><li><a href="module-$ui_components_my-form.html#~event:validate">validate</a></li><li><a href="module-widgets_my-back-top.html#event:click">click</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#appendChildNode">appendChildNode</a></li><li><a href="global.html#createEllipsisContainer">createEllipsisContainer</a></li><li><a href="global.html#createEllipsisContentHolder">createEllipsisContentHolder</a></li><li><a href="global.html#destroyVue">destroyVue</a></li><li><a href="global.html#getData">getData</a></li><li><a href="global.html#inRange">inRange</a></li><li><a href="global.html#instanceVue">instanceVue</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#pxToNumber">pxToNumber</a></li><li><a href="global.html#removeEllipsisContainer">removeEllipsisContainer</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#scrollTop">scrollTop</a></li><li><a href="global.html#setData">setData</a></li><li><a href="global.html#styleToString">styleToString</a></li><li><a href="global.html#wrapperDecorations">wrapperDecorations</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">my-crud/src/Crud.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;MyLayout class="my-crud" :north="{height:'auto'}" split :fit="fit">
    &lt;template v-if="$slots.filter" v-slot:north>
      &lt;MyContainer>
        &lt;MyFilter v-bind="filter"
                  :model="currentQuery"
                  @submit="handleFilterSubmit"
                  @reset="handleFilterReset">
          &lt;slot name="filter">&lt;/slot>
        &lt;/MyFilter>
      &lt;/MyContainer>
    &lt;/template>

    &lt;MyContainer :fit="fit">
      &lt;MyTable ref="table"
               v-bind="tableProps"
               :columns="columns"
               :toolbar="!!(title||$slots.title||$slots.actions)"
               :fit="fit"
               :loader="loader"
               :title="title"
               header-background>
        &lt;slot name="title" slot="title">{{title}}&lt;/slot>
        &lt;slot name="toolbar" slot="actions">&lt;/slot>
        &lt;template v-slot:_handle="{row, column, $index}">
          &lt;Handlebar :handles="column.handles"
                     :theme="column.theme"
                     :size="tableProps.size"
                     :row="row"
                     @command="handleCommand($event, row, $index)">&lt;/Handlebar>
        &lt;/template>
        &lt;template v-slot:_handle.header="scope">
          &lt;slot name="handle-header" v-bind="scope">{{scope.column.label}}&lt;/slot>
        &lt;/template>

        &lt;template v-for="col in propsSlots" v-slot:[col.prop]="scope">
          &lt;slot :name="col.prop" v-bind="scope">&lt;/slot>
        &lt;/template>

      &lt;/MyTable>
    &lt;/MyContainer>
    &lt;!-- 详情 -->
    &lt;MyDialog v-if="currentRow &amp;&amp; viewDialog!==null"
              v-bind="viewDialogProps"
              :visible.sync="viewVisible"
              target="body"
              :footer="null">
      &lt;slot name="detail" :row="currentRow" :loading="loading">
        &lt;Detail :data="currentRow" :loading="loading">&lt;/Detail>
      &lt;/slot>
    &lt;/MyDialog>

    &lt;!-- 新增、编辑表单 -->
    &lt;MyDialog class="my-crud-form-dialog"
              v-if="formDialog!==null"
              v-bind="formDialogProps"
              :visible.sync="formDialogVisible"
              :footer="null"
              target="body"
              :title="isEdit ? '编辑': '新增'">
      &lt;MyForm v-bind="formProps" :model="currentRow" :on-submit="handleFormSubmit">
        &lt;slot name="form" :row="currentRow" :loading="loading">&lt;/slot>
      &lt;/MyForm>
    &lt;/MyDialog>


  &lt;/MyLayout>
&lt;/template>

&lt;script>
  /**
   *  增删查改 组件
   *  @module $ui/components/my-crud
   */

  import {MyLayout, MyContainer, MyFilter, MyTable, MyDialog, MyForm} from '$ui'
  import Handlebar from './Handlebar'
  import Detail from './Detail'

  // 分页组件默认参数
  const defaultPagination = {
    background: true,
    layout: 'total,sizes, ->, prev, pager, next',
    pageSizes: [10, 20, 50, 100]
  }

  // 详情弹窗默认参数
  const defaultViewDialog = {
    width: '80%',
    draggable: true,
    title: '详情',
    modal: true
  }

  // 新增、修改弹窗默认参数
  const defaultFormDialog = {
    width: '80%',
    draggable: true,
    modal: true
  }

  // 表单组件默认参数
  const defaultForm = {
    footerAlign: 'right'
  }

  /**
   * 插槽
   * @member slots
   * @property {string} filter 定义筛选条件，定义表单项
   * @property {string} title 定义表格标题区域内容
   * @property {string} toolbar 定义工具区内容
   * @property {string} handle-header 作用域插槽，定义操作列的列头，参数：column 列配置参数
   * @property {string} detail 作用域插槽，定义详情显示内容，参数：row 行数据对象，loading 加载中
   * @property {string} form 作用域插槽，定义新增、编辑表单项，参数：row 行数据（新增为null），loading 加载中
   *
   */
  export default {
    name: 'MyCrud',
    components: {
      MyLayout,
      MyContainer,
      MyFilter,
      MyTable,
      Handlebar,
      MyDialog,
      MyForm,
      Detail
    },
    /**
     * 属性参数
     * @member props
     * @property {string} [title] 标题，也可以用插槽定义
     * @property {boolean} [fit] 适配父容器
     * @property {Object} [filter] 筛选组件 MyFilter 配置参数
     * @property {Object} [query] 初始查询参数对象
     * @property {Object} [tableOptions] 表格组件 MyTable 配置参数
     * @property {Array} [columns] 列配置数组，字段支持el-table-column组件参数
     * @property {Function|Object} [adapter] 数据请求适配方法 函数必须返回对象 {fetch, add, update, remove, get, batch}
     * @property {Object} [viewDialog] 详情对话框配置参数， 设置null，表示自定义显示详情，不采用自带dialog
     * @property {Object} [formDialog] 新增、编辑弹窗配置参数，设置null 表示自定义，需要自己实现
     * @property {Object} [formOptions]  新增、编辑表单配置
     *
     */
    props: {
      title: String,
      fit: Boolean,
      // MyFilter配置参数
      filter: Object,

      // 初始查询参数对象
      query: Object,

      // 表格配置参数
      tableOptions: Object,

      // 表格列配置，
      // 扩增了 handle类型的列，
      // 配置参数 {type:'handle',label,theme:'button|text|icon', handles:[{view,edit,remove,text,icon,type,access}]}
      columns: Array,

      // 数据请求适配方法
      adapter: {
        type: [Function, Object],
        required: true,
        default() {
          return {
            fetch: null,
            add: null,
            update: null,
            remove: null,
            get: null,
            batch: null
          }
        }
      },

      // 详情对话框配置参数， 设置null，表示自定义显示详情，不采用自带dialog
      viewDialog: {
        type: Object
      },
      // 新增、编辑弹窗配置
      formDialog: {
        type: Object
      },
      // 新增、编辑表单配置
      formOptions: {
        type: Object
      }
    },
    data() {
      this.dataAdapter = null
      return {
        currentQuery: this.query,
        loading: false,
        currentRow: null,
        isEdit: false,
        viewVisible: false,
        formDialogVisible: false
      }
    },
    computed: {
      tableProps() {
        return {
          pagination: defaultPagination,
          ...this.tableOptions
        }
      },
      viewDialogProps() {
        return {
          ...defaultViewDialog,
          ...this.viewDialog
        }
      },
      formDialogProps() {
        return {
          ...defaultFormDialog,
          ...this.formDialog
        }
      },
      formProps() {
        return {
          ...defaultForm,
          ...this.formOptions
        }
      },
      propsSlots() {
        return (this.columns || []).filter(col => (!!col.prop &amp;&amp; this.$scopedSlots[col.prop]))
      }
    },
    watch: {
      query: {
        immediate: true,
        handler(val) {
          this.currentQuery = val
        }
      }
    },
    methods: {
      /**
       * 打开新增弹窗
       * @method openAddDialog
       */
      openAddDialog() {
        // 必须要适配了添加方法，才能激活弹窗
        if (!this.dataAdapter.add) return
        const model = this.formOptions?.model || {}
        this.currentRow = Object.freeze({...model})
        this.isEdit = false
        this.formDialogVisible = true
      },
      emitError(type, message) {
        /**
         * 请求报错时触发
         * @event error
         * @param {string} type 请求方法名，如 fetch/get/update/remove/batch
         * @param {*} message 错误信息
         */
        this.$emit('error', type, message)
      },
      emitSuccess(type, message) {
        /**
         * 请求成功时触发
         * @event success
         * @param {string} type 请求方法名，如 fetch/get/update/remove/batch
         * @param {*} message 响应数据
         */
        this.$emit('success', type, message)
      },
      loader(page, limit) {
        if (!this.dataAdapter.fetch) {
          return Promise.reject(new Error('缺少fetch方法'))
        }
        return this.dataAdapter.fetch({
          page,
          limit,
          ...this.currentQuery
        }, this).then(res => {
          this.emitSuccess('fetch', res)
          return res
        })
          .catch(e => {
            this.emitError('fetch', e)
          })
      },
      getDetail({row, index}) {
        if (!this.dataAdapter.get) return
        this.loading = true
        this.dataAdapter.get({
          row,
          index
        })
          .then(res => {
            const model = this.formOptions?.model || {}
            this.currentRow = Object.freeze({
              ...model,
              ...row,
              ...res
            })
            this.emitSuccess('get', res)
          })
          .catch(e => {
            this.emitError('get', e)
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleFilterSubmit(query) {
        this.currentQuery = Object.freeze(query)
        this.refresh()
      },
      handleFilterReset() {
        this.currentQuery = Object.freeze(this.query)
      },
      handleFormSubmit(row) {
        // 编辑
        if (this.isEdit) {
          return this.dataAdapter.update({
            row,
            index: 0
          })
            .then(res => {
              this.formDialogVisible = false
              this.currentRow = null
              this.reload()
              this.emitSuccess('update', res)
            })
            .catch(e => {
              this.emitError('update', e)
            })
        } else {
          // 新增
          return this.dataAdapter.add({
            row,
            index: 0
          })
            .then(res => {
              this.formDialogVisible = false
              this.refresh()
              this.emitSuccess('add', res)
            })
            .catch(e => {
              this.emitError('add', e)
            })
        }
      },
      handleCommand(handle, row, index) {
        this.currentRow = Object.freeze(row)

        // 查看详情
        if (handle.view) {
          this.$nextTick(() => {
            this.viewVisible = true
          })
          this.getDetail({
            row,
            index
          })
        }

        // 编辑
        if (handle.edit) {
          this.$nextTick(() => {
            this.isEdit = true
            this.formDialogVisible = true
          })
          this.getDetail({
            row,
            index
          })
        }

        // 删除
        if (handle.remove) {
          this.$confirm('此操作将删除该条数据，是否继续？', '提示', {
            type: 'warning'
          }).then(() => {
            this.dataAdapter.remove({
              row,
              index
            }).then(res => {
              this.currentRow = null
              this.reload()
              this.emitSuccess('remove', res)
            }).catch(e => {
              this.emitError('remove', e)
            })
          }).catch(e => {
          })
        }
        /**
         * 点击操作列按钮触发
         * @event command
         * @param {Object} handle 按钮配置
         * @param {Object} row 行数据
         * @param {number} index 行索引
         */
        this.$emit('command', handle, row, index)
      },
      /**
       * 重新加载表格数据，分页保持不变
       * @method reload
       */
      reload() {
        this.$refs.table.load()
      },
      /**
       * 重新加载表格数据，分页重置为第一页
       * @method refresh
       */
      refresh() {
        this.$refs.table.refresh()
      },
      batchRemove() {
        const elTable = this.$refs.table.$refs.elTable
        const {selection, rowKey} = elTable
        const rows = rowKey ? selection.map(item => item[rowKey]) : selection
        if (rows.length === 0) {
          this.$message.info('请勾选需要删除的数据！')
          return
        }
        const list = this.$refs.table.list
        const indexes = selection.map(row => list.findIndex(item => row === item))
        const message = this.$message({
          type: 'info',
          message: '正在执行批量删除...',
          duration: 0
        })
        this.dataAdapter.batch({
          rows,
          indexes
        }).then(res => {
          this.reload()
          this.emitSuccess('batch', res)
        }).catch(e => {
          this.emitError('batch', e)
        }).finally(() => {
          message.close()
        })
      }
    },
    created() {
      this.dataAdapter = typeof this.adapter === 'function'
        ? this.adapter(this)
        : this.adapter

    }
  }
&lt;/script>

</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Wed Nov 18 2020 13:00:34 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
